<template>
  <div>
    <!-- 头部 -->
    <div class="pd-head">
      <header class="fcc fixed w100pc">
        <div>
          <h2 class="fff">深圳·较场尾/大鹏古城</h2>
          <p class="f14 fff mt-10 mb-10">连海岸线都不愿意离开的民宿村</p>
          <span class="f12 bg-fff center">
            <i class="iconfont iconlocation"></i>
            深圳,大鹏新区
          </span>
        </div>
      </header>
    </div>
    <!-- 导航 -->
    <div class="pd-nav">
      <nav class="fcc bg-fff jc-sa w100pc f14 fixed">
        <div>小区房源</div>
        <div>评论（49条）</div>
        <div>周边玩乐</div>
        <div>小区介绍</div>
      </nav>
    </div>
    <!-- 首页进来的导航栏 -->
    <div class="pd-homeNav" v-if="!sceneryId">
      <div class="fcc jc-sa bg-fff homeNav fixed w100pc f12">
        <p>别墅客栈</p>
        <p>|</p>
        <p>特色公寓</p>
      </div>
    </div>
    <van-list
      class="ul"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 房源列表 -->
      <li v-for="(inem,index) in list" :key="index" @click="change(inem)">
        <div class="rel height">
          <img v-lazy="`https://img.villaday.com${inem.imageURL}`" width="100%" height="100%">
          <div class="pirce fcc abs">
            <span class="f12 fff">￥</span>
            <span class="fff f18">{{inem.minPrice/100}}</span>
            <span class="f12 fff">起</span>
          </div>
          <img v-lazy="`https://img.villaday.com${inem.imageURL}`" class="image abs">
        </div>

        <div class="text pt-10 bg-fff">
          <h3 class="f18 ml-5">{{inem.name}}</h3>
          <p class="mt-5 f12 ml-5">离海边十米、北欧风民宿、海景天台、KTV、麻将、厨房、烧烤</p>
          <span class="f12 mt-10 ml-5 f999">
            距离45km ({{inem.street}})
            <span class="ml-10">{{inem.roomNum}}人想去</span>
          </span>
        </div>
      </li>
    </van-list>
  </div>
</template>

<script>
import { constants } from "crypto";
export default {
  data() {
    return {
      list: [],
      sceneryId: "",
      loading: false,
      pageNum: 1,
      pageSize: 2,
      totalPge: "",
      finished: false
    };
  },
  methods: {
    onLoad() {
      setTimeout(() => {
        let url = "/house/getList";
        this.sceneryId = this.$route.params.sceneryId;
        let data = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          sceneryId: this.sceneryId
        };
        this.$axios
          .post(url, data)
          .then(res => {
            // console.log(res, "res");
            this.totalPge = res.totalPge;
            //不能给数组里面push数组
            res.list.forEach(lists => {
              this.list.push(lists);
            });
            // 数据全部加载完成
            if (res.list <= this.pageSize) {
              this.finished = true;
            }
          })
          .then(() => {
            // console.log(this.pageNum);
            this.pageNum++; //页数增替
            // console.log(this.list);
            // 加载状态结束
            this.loading = false;
          });
      }, 800);
    },
    async change(inem) {
      let { houseId } = inem;
      this.$store.commit("updateHouseId", houseId);
      this.$router.push({
        path: "/goods/goodsDetail",
        query: { houseId }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../style/goodsList.less";
</style>

